<template>
  <el-form ref="loginForm" :model="userInfo" status-icon label-width="0px" :hide-required-asterisk="true" size="large"
    label-position="left">
    <el-form-item label="" prop="username" size="large">
      <el-input v-model="userInfo.username" autocomplete="off" placeholder="请输入用户名">
        <template #prepend><el-icon>
            <User />
          </el-icon></template>
      </el-input>
    </el-form-item>
    <el-form-item label="" prop="password" size="large">
      <el-input v-model="userInfo.password" type="password" autocomplete="off" show-password
        @keyup.enter="loginHandle(loginForm)" placeholder="请输入密码">
        <template #prepend><el-icon>
            <Lock />
          </el-icon></template>
      </el-input>
    </el-form-item>
    <div class="w-full flex justify-center items-center p-0 my-5">
      <el-button class="w-full  text-center" type="warning" @click="loginHandle(loginForm)" :loading="loginLoading"
        auto-insert-space>登录</el-button>
    </div>
  </el-form>
</template>

<script  setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUsersStore } from '@/store/modules/user'
import { User, Lock } from '@element-plus/icons-vue'
const loginForm = ref()
const userInfo = reactive({
  username: '',
  password: ''
})
const loginLoading = ref(false)
const loginHandle = async () => {
  loginLoading.value = true
  if (!userInfo.password || !userInfo.username) {
    ElMessage.error(`请输入${userInfo.username ? '密码' : '用户名'}`)
    loginLoading.value = false
    return false
  }
  try {
    await useUsersStore().login(userInfo)
  } catch (error) {
    ElMessage({
      message: error.msg,
      type: 'error'
    })
    loginLoading.value = false
  }
}
</script>